---
import Search from "@astrojs/starlight/components/Search.astro";
import Logo from "./Logo.astro";
import { Icon } from "@astrojs/starlight/components";
import PillLink from "./PillLink.astro";
import ThemeSelect from "./ThemeSelect.astro";
import StargazersCount from "./StargazersCount.astro";
import StargazersFallback from "./StargazersFallback.astro";

const isDashHomepage = Astro.locals.starlightRoute.id === "";
const isEnhanceHomepage = Astro.locals.starlightRoute.id === "enhance";
---

<div class="bg-[var(--sl-color-bg)] px-2 py-2 lg:px-6">
  <div
    class="flex max-w-[100vw] flex-row items-center gap-3 rounded border border-[var(--sl-color-gray-5)] py-2 pr-2 pl-4 lg:gap-3 lg:px-6"
  >
    <div class="flex grow items-end">
      <a href="/" class="no-underline">
        <Logo />
      </a>
      {
        isEnhanceHomepage ? (
          <p class="ml-2 hidden h-min text-sm leading-[18px] text-orange-400 uppercase md:block dark:text-orange-600">
            Companion
          </p>
        ) : null
      }
    </div>
    <form action="/insiders/">
      <button
        class="dark:bg-orange-250 relative rounded border border-orange-200 bg-orange-100 text-base text-orange-600 hover:bg-orange-200 hover:text-orange-700 hover:!no-underline md:h-[38px] md:px-3 dark:border-orange-900 dark:bg-orange-950 dark:text-orange-400 dark:hover:bg-orange-900 dark:hover:text-orange-200"
      >
        <div
          class="hidden flex-col items-start gap-0 leading-1.5 md:flex md:pt-2"
        >
          <span
            class="relative -top-2 text-[0.625rem] text-orange-600 uppercase dark:text-orange-400"
            >Join Insiders</span
          >
          <span class="hidden md:inline-block">Get Companion Apps 🌟</span>
        </div>
        <div class="md:hidden">
          <span class="text-xs text-orange-400 uppercase dark:text-orange-600"
            >Join Insiders</span
          >
        </div>
      </button>
    </form>
    {
      isDashHomepage ? (
        <PillLink href="/getting-started" class="hidden lg:block">
          <>
            <Icon name="document" size="20px" />
            <span class="hidden lg:block"> Docs</span>
          </>
        </PillLink>
      ) : null
    }
    <StargazersCount server:defer>
      <StargazersFallback slot="fallback" />
    </StargazersCount>
    <PillLink class="hidden lg:block" href="/donating">
      <Icon name="heart" size="20px" color="var(--color-red-500)" /><span
        class="hidden lg:block"
      >
        Donate</span
      >
    </PillLink>
    <PillLink
      class="hidden lg:block"
      href="https://discord.gg/SXNXp9NctV"
      target="_blank"
    >
      <Icon name="discord" size="20px" />
    </PillLink>
    <Search />
    <div class="hidden md:block">
      <ThemeSelect />
    </div>
  </div>
</div>
